<template>
	<div class="main">
        <MyHeader bgc="gold" color="lime" title="购物车案例"></MyHeader>
				<MyGoods v-for="item in list" :key="item.goods_id" :obj="item"></MyGoods>
				<MyFooter :arr="list"></MyFooter>
	</div>
</template>

<script>
	// 获取-购物车列表接口  GET  https://applet-base-api-t.itheima.net/api/cart
   import MyHeader from './components/MyHeader.vue'
   import MyGoods from './components/MyGoods.vue'
   import MyFooter from './components/MyFooter.vue'

	// 引入 第三方 包
	import 'bootstrap/dist/css/bootstrap.css'
	import axios from 'axios'

	export default {
		data() {
			return {
				list: [] // 商品所有数据
			}
		},

		created() {
			this.getList() 
		},

		methods: {
			 async getList(){
          const {data: res} = await axios.get('https://applet-base-api-t.itheima.net/api/cart')
					console.log(res);
					this.list = res.list    // 将发送 axios 请求的得到的数据存储到 list 中
				}
		},

		components: {
			  MyHeader,
				MyGoods,
				MyFooter
		}
	}
</script>

<style scoped>
	.main {
		padding-top: 45px;
		padding-bottom: 50px;
	}
</style>
